<template>
	<view class="online-bg">
		<view>
			<view>
				<!-- <searchBgGray placeholder="搜索医生" @search="handleSearch"></searchBgGray> -->
				<searchBtn placeholder="搜索医生" @search="handleSearch"></searchBtn>
			</view>
			<view class="between-center mar-10-0">
				<view v-for="item in listMenu">
					<view class="text-center" @click="toPageDepartment">
						<view class="center">
							<u-image class="img-head" :src="hostApi+item.pathImg"></u-image>
						</view>
						<view class="mar-5">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pad-16r">
			<view class="online-deptartment">
				<view class="between center pad-10">
					<view class="group-title">
						<view>
							<view class="group-name">开诊科室</view>
							<view class="center">
								<view class="group-bg"></view>
							</view>
						</view>
					</view>
					<view @click="toPageDepartment" class="more">更多>></view>
				</view>
				<view class="flex-wrap">
					<view class="depart" v-for="item in listDepartment" @click="toPageDepartment(item)">
						<view class="department-name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white pad-16r">
			<view>
				<TabVue :list="listTabs" @handleChange="changeTabs" :current="active" flex="start"></TabVue>
				<view class=" mar-10">
					<view>
						<view class="doctor" v-for="item in listDoctor" @click="toPageDoctor(item)">
							<view class="flex-start">
								<u-image class="img-doctor" v-if="item.headImg" :src="hostApi+item.headImg"></u-image>
								<u-image class="img-doctor" v-else :src="src"></u-image>
								<view class="right">
									<view class="flex-start">
										<view class="doctor-name">{{item.name}}</view>
										<view class="doctor-job mar-0-10">{{item.jobTitle}}</view>
									</view>
									<view class="doctor-dept">{{item.deptName}}</view>
									<view class="start-center">
										<view v-if="item.likesNum" class="start-center service">
											<image class="img-icon" src="/static/images/icon/likesNum.png"></image>
											<view class="mar-0-5">{{item.likesNum}}</view>
										</view>
										<view v-if="item.serviceNum" class="start-center mar-0-10 service">
											<image class="img-icon" src="/static/images/icon/servesNum.png"></image>
											<view class="mar-0-5">{{item.serviceNum}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="flex-start center money mar-10">
								<view class="flex-start" v-if="item.registerMoney">
									<u-icon name="photo"></u-icon>
									<view class="mar-0-5">￥{{item.registerMoney}}</view>
								</view>
								<view class="flex-start mar-0-5" v-if="item.diagnosisMoney">
									<u-icon name="photo-fill"></u-icon>
									<view class="mar-0-5">￥{{item.diagnosisMoney}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<LoadVue :load="load"></LoadVue>
	</view>
</template>

<script>
	import searchBgGray from '../../components/Search/searchBgGray.vue';
	import TabVue from '../../components/Tabs/Tab.vue';
	import searchBtn from '@/components/Search/searchBtn.vue'
	import {
		menuSelect
	} from '../../api/menu';
	import {
		getDeptList
	} from '../../api/department';
	import {
		doctorSelect
	} from '../../api/doctor';
	import {
		mapGetters
	} from 'vuex';
	import {
		dictionarySelect
	} from '../../api/dictionary';
	import {
		doctorConsultationSelect,
		doctorConsultationLast
	} from '../../api/doctorConsultation';
	export default {
		components: {
			searchBgGray,
			TabVue,
			searchBtn
		},
		data() {
			return {
				name: '', //搜索医生
				src: '/static/images/hospital/defaultDoctor.png',
				listTabs: [{
						name: "医生推荐",

					},
					{
						name: "最近咨询"
					}
				], //医生推荐，最近咨询
				listMenu: [], //最上面的功能
				listDepartment: [], //科室
				listDoctor: [], //医生推荐
				active: 0, //默认医生推荐
				load: false,
			}
		},
		computed: {
			...mapGetters(["hostApi", "userInfo"])
		},
		mounted() {
			this.init();
		},
		methods: {
			changeTabs(e) {
				this.active = e
				if (e == 0) {
					this.getDoctor()
				} else {
					this.changeDoctorLast()
				}
			},
			toPageDoctor(item) {
				uni.setStorageSync("doctorCurrent", 1)
				// 如果要想在点击后进入选择时间，需要查询当前医生是否有排班
				// uni.setStorageSync("doctorCode", item.code)
				uni.navigateTo({
					url: `/pages/Introduce/doctor?code=` + item.code
				})
			},
			toPageDepartment(item) {
				// 设置跳转到医生页面，出现tabs的面板为第二个
				uni.setStorageSync("departmentName", item.name)
				uni.navigateTo({
					url: "/pages/registerDepartment/index"
				})
			},
			init() {
				this.getMenu();
				this.getDepartment();
				this.getDoctor();
			},
			getDoctor() {
				// 默认显示医生的条数
				this.load = true;
				dictionarySelect({
					code: "onlineShowDoctor",
					status: 1
				}).then(res => {
					if (res) {
						let num = parseInt(res[0].describe)
						doctorSelect({
							page: 1,
							name: this.name,
							orderBy: 'sort',
							size: num
						}).then(res => {
							this.listDoctor = res;
						})
					}
				}).finally(() => {
					this.load = false
				})
			},
			getDepartment() {
				dictionarySelect({
					code: "onlineShowDepartmentNum",
					status: 1
				}).then(res => {
					if (res) {
						let num = parseInt(res[0].describe)
						getDeptList({
							departmentType: "01",
							hasChildDepartment: '0',
							page: 1,
							size: num
						}).then(res => {
							if (res) {
								this.listDepartment = res
							}
						})
					}
				})

			},
			getMenu() {
				menuSelect({
					codes: ['onlineconsultation'],
					status: 1,
					orderBy: 'sort'
				}).then(res => {
					res = res.onlineconsultation
					if (res) {
						let map = new Map();
						res.forEach(item => {
							if (item.parentId != 0) {
								map.set(item.id, item);
							}
						})
						this.listMenu = [...map].map(item => item[1]);
					}
				})
			},
			handleSearch(value) {
				this.name = value;
				this.getDoctor();
			},
			changeDoctorLast() {
				doctorConsultationLast({
					patId: this.userInfo.patId,
					orderBy: "consultation_id desc"
				}).then(res => {
					console.log(res)
					this.listDoctor = res;
				})
			}
		}
	}
</script>

<style scoped>
	.online-bg {
		background: linear-gradient(170px, #f0f8fc 0%, #f5fcff 53%, #FFFFFF 100%);
		border-radius: 0px 0px 0px 0px;
	}

	.img-head {
		width: 60px !important;
		height: 60px !important;
		border-radius: 10px !important;
	}

	.img-icon {
		width: 14px;
		height: 14px;
	}

	.img-doctor {
		width: 60px !important;
		height: 60px !important;
	}

	.online-deptartment {
		background-color: white;
		box-shadow: 0 2rpx 8rpx rgba(30, 198, 230, 0.06);
		border-radius: 16rpx;
	}



	.doctor {
		padding: 10px;
		background-image: url("/static/images/imgs/doctor-tuijian.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 10px 0;

		.right {
			margin: 0 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

	}

	.depart {
		padding: 5px;
		margin: 5px;
		background: #F9F9F9;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;
	}

	.department-name {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 14px;
		color: #666666;
		line-height: 15px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.more {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 14px;
		color: #48D0DB;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.doctor-name {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.doctor-job {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 12px;
		color: #999999;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.doctor-dept {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 12px;
		color: #666666;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.money {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 11px;
		color: #2E6D78;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.service {
		background: #F4F4F4;
		border-radius: 155px 155px 155px 155px;
		padding: 0 10px;
	}
</style>